<div class="container">

  <div class="row">
    <div class="col-md-8">
      <div style="text-align: center" *ngIf="page.totalElements==0">
        <h1>还没有人发表博客</h1>
      </div>
      <div *ngIf="page.totalElements>0">
        <div class="panel panel-default" *ngFor="let blog of page.content">
          <div class="panel-body">
            <h2 class="">
              <span>
                <a [routerLink]="['/userspace',blog.user.username]" [title]="blog.user.nickname">
                  <img [src]="blog.user.avatar?blog.user.avatar:'assets/images/avatar-default.jpg'"
                       class="blog-avatar-50">
                </a>
              </span>
              <a [routerLink]="['/post',blog.id]" class="" [title]="blog.user.nickname">
                {{blog.title}}
              </a>
            </h2>
            <p class="" [innerHTML]="blog.summary"></p>
            <div class="">
              <a [routerLink]="['/userspace',blog.user.username]" class="card-link">{{blog.user.username}}</a>
              发表于{{blog.createTime}}
              <i class="fa fa-eye" aria-hidden="true">{{blog.readSize}}</i>
              <i class="fa fa-heart-o" aria-hidden="true">{{blog.voteSize}}</i>
              <i class="fa fa-comment-o" aria-hidden="true">{{blog.commentSize}}</i>
            </div>
          </div>
        </div>
        <!--rows每页几行
        totalRecords总共有多少行
        first从第几行开始用来确定当前在第几页
        -->
        <p-paginator [rows]="page.pageable.pageSize"
                     [totalRecords]="page.totalElements"
                     [first]="page.pageable.offset"
                     [rowsPerPageOptions]="[10,20,30]"
                     (onPageChange)="pageChanged($event)">

        </p-paginator>
      </div>

    </div>

    <!-- 右侧栏目 -->
    <div class="col-md-4">
      <div>
        <!-- 热门标签 -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> 热门标签</h5>
          </div>

          <div class="panel-body">
            <div class="row">
              <div class="col-lg-12">
                <a href="/blogs?keyword=1">
                  <span class="badge">Web Design</span></a>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门用户 -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="card-header"><i class="fa fa-users" aria-hidden="true"></i> 热门用户</h5>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-lg-12">
								<span>
                  <a href="/u/waylau" title="waylau">
                    <img src="assets/images/avatar-default.jpg" class="blog-avatar-50">
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门文章 -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="card-header"><i class="fa fa-fire" aria-hidden="true"></i> 热门文章</h5>
          </div>

          <div class="panel-body">
            <ul class="list-group">
              <a class="list-group-item">
                22<span class="badge badge-pill">11</span>
              </a>
              <a class="list-group-item">
                22<span class="badge badge-pill">11</span>
              </a>
              <a class="list-group-item">
                22<span class="badge badge-pill">11</span>
              </a>
            </ul>
          </div>

        </div>

        <!-- 最新发布 -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title"><i class="fa fa-line-chart" aria-hidden="true"></i> 最新发布</h5>
          </div>
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let hero of [1,2,3]; let i=index">{{i + 1}} - {{hero}}</li>
          </ul>

        </div>
      </div>
    </div>

  </div>
  <!-- /.row -->

</div>
